<template>
  <div class="model-config-container">
    <el-card class="model-card">
      <template #header>
        <div class="card-header">
          <span>模型配置</span>
          <el-button :icon="Refresh" circle size="small" @click="loadModels" :loading="loadingModels"></el-button>
        </div>
      </template>

      <div v-loading="loadingModels">
        <div v-if="models.length === 0" class="empty-state">
          <el-empty description="暂无可用模型"></el-empty>
        </div>

        <el-tabs v-else type="card">
          <el-tab-pane label="可用模型">
            <el-table :data="models" style="width: 100%">
              <el-table-column type="expand">
                <template #default="props">
                  <div class="model-details">
                    <p v-if="props.row.description">{{ props.row.description }}</p>
                    <div class="model-params">
                      <div class="param-item">
                        <span class="param-label">默认宽度:</span>
                        <span class="param-value">{{ props.row.defaultWidth || props.row.width || '-' }}px</span>
                      </div>
                      <div class="param-item">
                        <span class="param-label">默认高度:</span>
                        <span class="param-value">{{ props.row.defaultHeight || props.row.height || '-' }}px</span>
                      </div>
                      <div class="param-item">
                        <span class="param-label">默认步数:</span>
                        <span class="param-value">{{ props.row.steps }}</span>
                      </div>
                      <div class="param-item">
                        <span class="param-label">默认CFG缩放:</span>
                        <span class="param-value">{{ props.row.cfgScale }}</span>
                      </div>
                      <div class="param-item" v-if="props.row.samplerName">
                        <span class="param-label">采样器:</span>
                        <span class="param-value">{{ props.row.samplerName }}</span>
                      </div>
                      <div class="param-item" v-if="props.row.scheduler">
                        <span class="param-label">调度器:</span>
                        <span class="param-value">{{ props.row.scheduler }}</span>
                      </div>
                      <div class="param-item" v-if="props.row.seed !== undefined && props.row.seed !== null">
                        <span class="param-label">默认种子:</span>
                        <span class="param-value">{{ props.row.seed }}</span>
                      </div>
                      <div class="param-item" v-if="props.row.denoisingStrength">
                        <span class="param-label">降噪强度:</span>
                        <span class="param-value">{{ props.row.denoisingStrength }}</span>
                      </div>
                      <div class="param-item" v-if="props.row.batchSize">
                        <span class="param-label">批次大小:</span>
                        <span class="param-value">{{ props.row.batchSize }}</span>
                      </div>
                      <div class="param-item" v-if="props.row.restoreFaces !== undefined">
                        <span class="param-label">恢复面部:</span>
                        <span class="param-value">{{ props.row.restoreFaces ? '是' : '否' }}</span>
                      </div>
                      <div class="param-item" v-if="props.row.tiling !== undefined">
                        <span class="param-label">平铺模式:</span>
                        <span class="param-value">{{ props.row.tiling ? '是' : '否' }}</span>
                      </div>
                      <div class="param-item" v-if="props.row.enableHr !== undefined">
                        <span class="param-label">高清修复:</span>
                        <span class="param-value">{{ props.row.enableHr ? '是' : '否' }}</span>
                      </div>
                      <div class="param-item" v-if="props.row.version">
                        <span class="param-label">版本:</span>
                        <span class="param-value">{{ props.row.version }}</span>
                      </div>
                    </div>
                    
                    <div class="prompt-section" v-if="props.row.positivePrompt">
                      <h4>默认提示词</h4>
                      <pre class="prompt-text">{{ props.row.positivePrompt }}</pre>
                    </div>
                    
                    <div class="prompt-section" v-if="props.row.negativePrompt">
                      <h4>默认负面提示词</h4>
                      <pre class="prompt-text">{{ props.row.negativePrompt }}</pre>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="示例" width="120">
                <template #default="scope">
                  <el-image
                    v-if="scope.row.modelName === 'img2img_ghibli'"
                    :src="ghibliImage"
                    fit="cover"
                    :preview-src-list="[ghibliImage]"
                    style="width: 100px; height: 100px; border-radius: 4px;"
                  ></el-image>
                  <el-image
                    v-else-if="scope.row.modelName === 'img2img_normal'"
                    :src="normalImage"
                    fit="cover"
                    :preview-src-list="[normalImage]"
                    style="width: 100px; height: 100px; border-radius: 4px;"
                  ></el-image>
                  <el-image
                    v-else-if="scope.row.imageUrl"
                    :src="scope.row.imageUrl"
                    fit="cover"
                    :preview-src-list="[scope.row.imageUrl]"
                    style="width: 100px; height: 100px; border-radius: 4px;"
                  ></el-image>
                  <div 
                    v-else 
                    class="empty-image"
                    style="width: 100px; height: 100px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background-color: #f5f7fa; color: #909399; font-size: 12px;"
                  >
                    无图像
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="displayName" label="名称" width="200"></el-table-column>
              <el-table-column prop="modelName" label="模型ID" width="220"></el-table-column>
              
              <el-table-column label="状态" width="100">
                <template #default="scope">
                  <div class="model-status">
                    <el-tag v-if="isDefaultModel(scope.row)" type="success">默认</el-tag>
                    <el-tag v-if="scope.row.enabled" type="info">启用</el-tag>
                    <el-tag v-else type="danger">禁用</el-tag>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="selectModel(scope.row)"
                  >
                    使用此模型
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import { getImg2ImgModels } from '@/api/modelConfig'
import type { ModelConfig } from '@/api/img2img'

// 导入本地图片
import ghibliImage from '../../images/text2img_ghibli.png'
import normalImage from '../../images/text2img_nomal.png'

// 事件定义
const emit = defineEmits(['select-model'])

// 状态管理
const models = ref<ModelConfig[]>([])
const loadingModels = ref(false)

// 辅助函数：检查是否为默认模型
function isDefaultModel(model: ModelConfig): boolean {
  // 根据模型名判断默认模型
  if (model.modelName === 'img2img_normal') return true
  
  // 如果没有明确指定默认模型，且当前是列表中的第一个，则视为默认
  if (models.value.length > 0 && models.value[0].modelName === model.modelName) {
    return true
  }
  
  return false
}

// 获取模型的示例图片
function getModelImage(modelName: string): string {
  if (modelName === 'img2img_ghibli') {
    return ghibliImage
  } else if (modelName === 'img2img_normal') {
    return normalImage
  }
  return ''
}

// 加载模型
async function loadModels() {
  loadingModels.value = true
  try {
    const response = await getImg2ImgModels()
    if (response.code === 200 && response.data) {
      // 处理模型数据
      const modelsList = response.data
      
      // 添加本地示例图片
      modelsList.forEach(model => {
        if (model.modelName === 'img2img_ghibli') {
          model.imageUrl = getModelImage(model.modelName)
        } else if (model.modelName === 'img2img_normal') {
          model.imageUrl = getModelImage(model.modelName)
        }
      })
      
      models.value = modelsList as any as ModelConfig[]
    } else {
      ElMessage.error(response.msg || '加载模型失败')
    }
  } catch (error) {
    console.error('加载模型失败:', error)
    ElMessage.error('加载模型失败')
  } finally {
    loadingModels.value = false
  }
}

// 选择模型
function selectModel(model: ModelConfig) {
  // 根据模型名确定要使用的模式
  let mode = 'anime'
  if (model.modelName === 'img2img_ghibli') {
    mode = 'ghibli'
  } else if (model.modelName === 'img2img_normal') {
    mode = 'anime'
  }
  
  // 发送模型信息和对应的模式
  emit('select-model', { ...model, mode })
}

// 生命周期钩子
onMounted(() => {
  loadModels()
})
</script>

<style scoped>
.model-config-container {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.model-details {
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.model-params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.param-item {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.param-label {
  font-weight: bold;
  margin-right: 8px;
}

.model-status {
  display: flex;
  gap: 5px;
}

.prompt-section {
  margin-top: 15px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.prompt-section h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #606266;
}

.prompt-text {
  margin: 0;
  padding: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}

.empty-image {
  text-align: center;
  border: 1px dashed #dcdfe6;
}
</style> 